<template>

  <el-container class="home-container">

    <el-aside width="180px">
      <el-row type='flex' align='middle'>
        <el-col><img src="../assets/heima.png" alt=""><span class="title">后台管理系统</span></el-col>
      </el-row>
      <!--      <div class="toggle-button" @click="toggleCollapse">|||</div>-->
      <el-menu background-color="#333744" text-color="#fff" @select="handleSelect"
               active-text-color="#409Bff" unique-opened
               :collapse-transition="false" router :default-active="this.$route.path">
        <!-- 一级菜单 -->
        <el-submenu :index="'' +item.id" v-for="item in menuList" :key="item.id">
          <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-location"></i>
            <!-- 文本 -->
            <span>{{item.name}}</span>
          </template>
          <el-menu-item :index="subItem.url" v-for="subItem in item.children" :key="subItem.id">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span>{{subItem.name}}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>

      <el-header>
        <!-- 顶端面包屑、登出等 -->
        <el-row type="flex" align="middle" class="top_banner">
          <el-col :span="20">
            <MenuBread :menuBreadMap="menuBreadMap"></MenuBread>
          </el-col>
          <!-- 显示用户名 -->
          <el-col :span="2">
            <CurrentName></CurrentName>
          </el-col>
          <!-- 退出 -->
          <el-col :span="2">
            <el-button type="info" @click="logout" size="mini" style="margin-left: 30px">退出</el-button>
          </el-col>
        </el-row>
      </el-header>
      <!-- 右边占位主题 -->
      <el-main>
        <!--        activeTabPath: {{activeTabPath}}, existTabPathList: {{existTabPathList}}, allTabList: {{allTabList}}-->
        <el-tabs v-model="activeTabPath" type="border-card" @tab-click="tabClick" @tab-remove="tabCloseCurrent" :closable="tabClosable">
          <el-tab-pane v-for="(item) in allTabList" :key="item.name" :name="item.name">
            <!-- 仅当前激活 tab，可以快捷关闭其他 -->
            <el-dropdown v-if="activeTabPath===item.name && existTabPathList.length>1" slot="label" @command="tabCommand" size="small" trigger="click">
              <span class="el-dropdown-link">{{item.title}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="b" v-if="tabCloseOtherShow">关闭其他</el-dropdown-item>
                <el-dropdown-item command="c" v-if="tabCloseLeftShow">关闭左边</el-dropdown-item>
                <el-dropdown-item command="d" v-if="tabCloseRightShow">关闭右边</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span slot="label" v-else>{{item.title}}</span>
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </el-main>

      <el-footer>
        <FooterBar></FooterBar>
      </el-footer>

    </el-container>

  </el-container>

</template>

<script>

import CurrentName from './Home/CurrentName'
import MenuBread from './Home/MenuBread'
import FooterBar from './Home/FooterBar'

export default {
  components: {
    CurrentName, MenuBread, FooterBar
  },
  data () {
    return {
      // 左边菜单数据
      menuList: [],
      // 面包屑键值对:
      menuBreadMap: [],
      // new
      existTabPathList: [],
      activeTabPath: '',
      allTabList: [],
      tabClosable: false,
      // 下拉框，关闭其他，关闭左边，关闭右边可选
      tabCloseOtherShow: false,
      tabCloseLeftShow: false,
      tabCloseRightShow: false
    }
  },
  created () {
    this.getMenuList()
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    // 当只有 1 个 tab 时，不可关闭
    existTabPathList (val, oldVal) {
      if (val.length === 1) {
        this.tabClosable = false
      } else if (val.length > 1) {
        this.tabClosable = true
        this.tabCloseOtherShow = true
      }
    },
    activeTabPath (val, oldVal) {
      let index = this.existTabPathList.indexOf(val)
      let length = this.existTabPathList.length
      console.log('index: ' + index + ', length: ' + length)
      // 最左边不可再关闭左边，最右边不可再关闭右边
      if (index === 0) {
        this.tabCloseLeftShow = false
        if (length > 1) {
          this.tabCloseRightShow = true
        }
      } else if (index === this.existTabPathList.length - 1) {
        this.tabCloseRightShow = false
        if (length > 1) {
          this.tabCloseLeftShow = true
        }
      } else {
        this.tabCloseLeftShow = this.tabCloseRightShow = true
      }
    }
  },
  methods: {
    // 菜单新建 tab
    menuAddTab (path) {
      console.log('path: ' + path)
      console.log('existResult: ' + this.existTabPathList.indexOf(path))
      // 若已有标签不存在,新建 tab
      let existResult = this.existTabPathList.indexOf(path)
      if (existResult === -1) {
        this.allTabList.push({
          // 菜单标题
          title: this.menuBreadMap[path].name,
          name: path
        })
        this.activeTabPath = path
        this.existTabPathList.push(path)
        console.log('this.editableTabsValue: ' + this.activeTabPath)
      } else {
        // 若存在, 切换 tab 选项卡
        this.activeTabPath = path
      }
    },
    // tab 切换，触发事件
    tabClick () {
      console.log('tabClick')
      this.$router.push(this.activeTabPath)
    },
    // tab 页操作：关闭当前 tab
    tabCloseCurrent (targetName) {
      let tabs = this.allTabList
      let activeName = this.activeTabPath
      console.log('tabCloseCurrent targetName: ' + targetName)
      // 数组剔除被关闭的
      this.existTabPathList.splice(this.existTabPathList.indexOf(targetName), 1)
      // 关闭选项卡
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.activeTabPath = activeName
      this.allTabList = tabs.filter(tab => tab.name !== targetName)
      // tab-菜单绑定
      this.$router.push(this.activeTabPath)
    },
    // 按钮关闭当前
    btnCloseCurrent () {
      console.log('btnCloseCurrent')
      let existTabNum = this.existTabPathList.length
      let closeTabPath = this.activeTabPath
      // 至少有 2 个 tab 时，才有效
      if (existTabNum > 1) {
        // 激活 tab 确定：最后一个，选择其左边；非最右，选择其右边
        this.existTabPathList.forEach((tab, index) => {
          console.log('index: ' + index + ', tab: ' + tab + ', this.activeTabPath: ' + this.activeTabPath)
          if (tab === closeTabPath) {
            if (index === existTabNum - 1) {
              this.activeTabPath = this.existTabPathList[existTabNum - 2]
            } else {
              this.activeTabPath = this.existTabPathList[index + 1]
            }
          }
        })
        // 剔除当前 tab
        this.allTabList = this.allTabList.filter(tab => tab.name !== closeTabPath)
        this.existTabPathList = this.existTabPathList.filter(item => item !== closeTabPath)
        // tab-菜单绑定
        this.$router.push(this.activeTabPath)
      }
    },
    // 按钮关闭其他 tab
    btnCloseOthers (targetName) {
      console.log('closeOthers targetName: ' + targetName)
      targetName = this.activeTabPath
      // 不是当前的直接关闭，激活状态不变
      this.allTabList = this.allTabList.filter(tab => tab.name === targetName)
      this.existTabPathList = this.existTabPathList.filter(item => item === targetName)
      // tab-菜单绑定
      this.$router.push(this.activeTabPath)
    },
    // 关闭左侧所有
    btnCloseLeft () {
      let indexOfResult = this.existTabPathList.indexOf(this.activeTabPath)
      console.log('btnCloseLeft indexOfResult: ' + indexOfResult)
      // tab 截取，激活 tab 不变
      this.allTabList.splice(0, indexOfResult)
      this.existTabPathList.splice(0, indexOfResult)
      // 左关屏蔽
      this.tabCloseLeftShow = false
    },
    // 关闭右侧所有
    btnCloseRight () {
      let indexOfResult = this.existTabPathList.indexOf(this.activeTabPath)
      console.log('btnCloseRight indexOfResult: ' + indexOfResult)
      // tab 截取，激活 tab 不变
      this.allTabList.splice(indexOfResult + 1, this.existTabPathList.length - 1 - indexOfResult)
      this.existTabPathList.splice(indexOfResult + 1, this.existTabPathList.length - 1 - indexOfResult)
      // 右关屏蔽
      this.tabCloseRightShow = false
    },
    // 快捷操作，单击触发时间
    tabCommand (command) {
      // this.$message('click on item ' + command)
      switch (command) {
        case 'a':
          this.btnCloseCurrent()
          break
        case 'b':
          this.btnCloseOthers()
          break
        case 'c':
          this.btnCloseLeft()
          break
        case 'd':
          this.btnCloseRight()
          break
        default:
          break
      }
    },
    // 左侧菜单，单击触发事件
    handleSelect (key, keyPath) {
      this.menuAddTab(key)
    },
    // ------------------------------
    // 登出
    async logout () {
      // 数据缓存清除
      window.sessionStorage.removeItem('realName')
      window.sessionStorage.removeItem('rongyunAppKey')
      window.sessionStorage.removeItem('rongyunToken')
      // 登出请求
      await this.$axios.post('logout')
      this.$message.warning('您已登出')
      // 跳到登录页
      await this.$router.push('/login')
    },
    // 用户左边菜单
    async getMenuList () {
      const { data } = await this.$axios.post('/menu/listLeft')
      this.menuList = data.data.menuLeftVoList
      this.menuBreadMap = data.data.menuBreadMap
      // console.log('this.$route: ' + JSON.stringify(this.$route))
      // this.menuBreadList = data.data.menuBreadMap[this.$route]
      // xx
      if (this.allTabList.length === 0) {
        let path = this.$route.path
        this.activeTabPath = path
        this.existTabPathList.push(path)
        if (path === '/welcome') {
          this.allTabList.push({
            title: '首页',
            name: path
          })
        } else {
          this.allTabList.push({
            title: this.menuBreadMap[path].name,
            name: path
          })
        }
      }
    }

  }
}

</script>

<style lang="less" scoped>

  @import "../assets/css/home.css";

</style>
